<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="企业编号" prop="id">
        <el-input
          v-model="queryParams.companyCode"
          placeholder="请输入企业编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="公司名称" prop="companyName">
        <el-input
          v-model="queryParams.companyName"
          placeholder="请输入公司名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="纳税类型" prop="taxPaymentType">
        <el-select v-model="queryParams.taxPaymentType" placeholder="选择纳税类型">
          <el-option v-for="(status,index) in status" :key="index" :label="status" :value="status"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>

    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增转让公司</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableList"  style="width: 100%;margin-top: 20px"     border >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left"  class="demo-table-expand">
            <el-form-item label="公司名称：">
              <span>{{ props.row.companyName }}</span>
            </el-form-item>

            <el-form-item label="企业行业：">
              <span>{{ props.row.companyForward }}</span>
            </el-form-item>

            <el-form-item label="经营范围：">
              <span>{{ props.row.companyDetails }}</span>
            </el-form-item>

          </el-form>
        </template>
      </el-table-column>

      <el-table-column label="企业编号"    align="center" prop="companyCode"/>
      <el-table-column label="公司名称" width="180" align="center" prop="companyName"/>
      <el-table-column label="企业行业" align="center" prop="companyForward"/>
      <el-table-column label="工商信用代码" align="center" prop="companyGSCode"/>
      <el-table-column label="企业类型" align="center" prop="companyType"/>
      <el-table-column label="纳税类型" align="center" prop="taxPaymentType"/>
      <el-table-column label="登记机关" align="center" prop="registrationAuthority"/>
      <el-table-column label="注册年限" align="center" prop="companyOpTime"/>
      <el-table-column label="注册资本" align="center" prop="registeredCapital"/>
      <el-table-column label="无形资产" align="center" prop="intangibleAssets"/>
      <el-table-column label="是否开户" align="center" width="80" prop="isOpenAccount">
        <template slot-scope="scope">
          <div v-if="scope.row.isOpenAccount==true">是</div>
          <div v-else>否</div>
        </template>
      </el-table-column>

      <el-table-column label="是否带发票" align="center" width="80" prop="isHaveInvoice">
        <template slot-scope="scope">
          <div v-if="scope.row.isHaveInvoice==true">是</div>
          <div v-else>否</div>
        </template>
      </el-table-column>

      <el-table-column label="是否带网银" align="center" width="80" prop="isHaveEBanking">
        <template slot-scope="scope">
          <div v-if="scope.row.isHaveEBanking==true">是</div>
          <div v-else>否</div>
        </template>
      </el-table-column>
      <el-table-column label="所在地区" align="center" prop="companyAddress"/>
      <el-table-column label="操作" fixed="right" width="150" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-show="total>0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="queryParams.pageSize"
      :current-page="queryParams.curPage"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 添加或修改线索列表对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" @close="resetForm('form')" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="公司名称" prop="companyName" >
              <el-input v-model="form.companyName" placeholder="请输入公司名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业行业" prop="companyForward">
              <el-input v-model="form.companyForward" placeholder="请输入企业行业" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工商信用代码" prop="companyGSCode" label-width="110px"
            >
              <el-input v-model="form.companyGSCode" placeholder="请输入工商信用代码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label="企业类型" prop="companyType">
              <el-input v-model="form.companyType"  placeholder="请输入企业类型" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所在地区" prop="companyAddress">
              <el-input v-model="form.companyAddress"  placeholder="请输入所在地区" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登记机关" prop="registrationAuthority">
              <el-input v-model="form.registrationAuthority"  placeholder="请输入登记机关" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="注册资本" prop="registeredCapital">
              <el-input v-model="form.registeredCapital"  placeholder="请输入注册资本" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="无形资产" prop="intangibleAssets">
              <el-input v-model="form.intangibleAssets"  placeholder="请输入无形资产" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否开户" prop="isOpenAccount">
              <el-radio-group v-model="form.isOpenAccount">
                <el-radio :label=true>是</el-radio>
                <el-radio :label=false>否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否带发票" prop="isHaveInvoice" label-width="100px">
              <el-radio-group v-model="form.isHaveInvoice">
                <el-radio :label=true>是</el-radio>
                <el-radio :label=false>否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否带网银" prop="isHaveEBanking" label-width="100px">
              <el-radio-group v-model="form.isHaveEBanking">
                <el-radio :label=true>是</el-radio>
                <el-radio :label=false>否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册年限" prop="companyOpTime">
              <el-input v-model="form.companyOpTime"  placeholder="请输入经营时间" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="纳税类型" prop="taxPaymentType">
          <el-select v-model="form.taxPaymentType" placeholder="选择纳税类型">
          <el-option v-for="(status,index) in status" :key="index" :label="status" :value="status"></el-option>
        </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经营范围" prop="companyDetails">
              <el-input v-model="form.companyDetails"  type="textarea" placeholder="请输入经营范围" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="企业编号" prop="companyCode">
              <el-input v-model="form.companyCode"  placeholder="请输入企业编号" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>

export default {
  data() {
    return {
      status:['小规模纳税人','一般纳税人'],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 线索列表表格数据
      tableList: [
        {  id:1}
      ],
      form: {},
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        curPage: 1,
        pageSize: 8,
        // id: null,
        // companyName: null,
        // companyForward: null,
      },
      // 表单参数
      // 表单校验
      rules: {
        companyName: [
          { required: true, message: '请填写公司名称', trigger: 'blur' }
        ],
        companyForward: [
          { required: true, message: '请填写企业行业', trigger: 'blur' }
        ],
        companyGSCode: [
          { required: true, message: '请填写工商信用代码', trigger: 'blur' }
        ],
        companyType: [
          { required: true, message: '请填写企业类型', trigger: 'blur' }
        ],
        companyAddress: [
          { required: true, message: '请填写所在地区', trigger: 'blur' }
        ],
        registrationAuthority: [
          { required: true, message: '请填写登记机关', trigger: 'blur' }
        ],
        registeredCapital: [
          { required: true, message: '请填写注册资本', trigger: 'blur' }
        ],
        intangibleAssets: [
          { required: true, message: '请填写无形资产', trigger: 'blur' }
        ],
        isOpenAccount: [
          { required: true, message: '请填写是否开户', trigger: 'blur' }
        ],
        isHaveInvoice: [
          { required: true, message: '请填写是否带发票', trigger: 'blur' }
        ],
        isHaveEBanking: [
          { required: true, message: '请填写是否带网银', trigger: 'blur' }
        ],
        companyOpTime: [
          { required: true, message: '请填写注册年限', trigger: 'blur' }
        ],
        taxPaymentType: [
          { required: true, message: '请填写纳税类型', trigger: 'blur' }
        ],
        companyDetails: [
          { required: true, message: '请填写经营范围', trigger: 'blur' }
        ],
        companyCode: [
          { required: true, message: '请填写企业编号', trigger: 'blur' }
        ],
      }
    };
  },
  created() {
    this.getList();

  },
  methods: {
    handleSizeChange(val) {
      this.queryParams.pageSize=val
      this.getList()
    console.log(`每页 ${val} 条`);
  },
  handleCurrentChange(val) {
      this.queryParams.curPage=val
    this.getList()

    console.log(`当前页: ${val}`);
  },
    /** 查询线索列表列表分页和搜索*/
    getList() {
      this.request({
        // url:"/dnw/companyListData",
        url: '/web/selCompany',
        method:'get',
        headers: {
          'Content-Type': 'application/json',
        },
        params: this.queryParams
        // params:{
        //   pageCurrent: 2,
        //   pageSize: 2
        // }
      }).then(res=>{
        console.log(res)

        this.tableList=res.data
        this.total=res.count
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.form = {
      }
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.curPage = 1;
      console.log(this.queryParams)
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams={
        curPage:1,
        pageSize:8
      }
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true
      this.form={}
      this.title = "添加转让公司"
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.form = row
      this.open = true
      this.title = "修改公司信息"
    },
    handleDelete(row) {
       this.request({
         methods: 'post',
         url: '/dnw/delete',
         params:{
          ctId : row.id

         }
       }).then(res=>{
         console.log(res)
         if (res){
           this.$message.success('删除成功')
           this.getList()
         }
       })
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
        this.form = {}
    },
    /** 修改，新增确定提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id){
            //修改接口
            console.log(this.form);
            this.request({
              url: '/dnw/edit',
              methods: 'post',
              params: this.form
            }).then(res=>{
              if (res) {
                this.$message.success('修改成功')
                this.open=false
                this.getList()

              }
            })
          }else {
            //添加接口
            this.request({
             methods: 'POST',
              url: '/dnw/add',
              params: this.form
            }).then(res=>{
              console.log(res);
              if (res) {
                this.$message.success('添加成功')
                this.open=false
                this.getList()
              }
            })
          }

        }
      })
    }
  }
}
</script>
